<template>
  <view class="bg">
    <view class="white">
      <view class="title" v-if="type == 1">{{ $t('common.输入支付密码') }}</view>
      <view class="title" v-else>{{ $t('common.输入交易密码') }}</view>
      <view class="pwd">
        <verification-code-style2 ref="verificationCodeStyle2" :latticeNum="6" :borderStyle="'border:none;border-radius: 10rpx;background-color: #F5F5F5;'" :border-check-style="'border:1px solid #3F60E7;border-radius: 10rpx;'" :lattice-size="72" :ciphertextSty="1"></verification-code-style2>
      </view>
      <view class="btn">
        <view class="btn-item" @click="cancleClick()">{{ $t('common.取消') }}</view>
        <view class="btn-item btn-item-s" @click="comfireClick()">{{ $t('common.确定') }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import verificationCodeStyle2 from '@/components/verification-code-style2/verification-code-style2.vue'
  export default {
    name: 'CodePop',
    props: {
      type: {
        default: 0,
        type: [Number, String]
      }
    },
    data() {
      return {}
    },
    components: {
      verificationCodeStyle2
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.verificationCodeStyle2.setFocus()
      })
    },
    updated() {
      this.$refs.verificationCodeStyle2.cleanVal()
    },
    methods: {
      cancleClick() {
        this.$emit('cancleCode')
      },

      comfireClick() {
        let val = this.$refs.verificationCodeStyle2.getValue()
        if (val && val.length == 6) {
          this.$emit('comfireCode', val)
        }
      }
    }
  }
</script>

<style lang="scss">
  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .white {
    background-color: #fff;
    margin: 0 72rpx;
    height: 364rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .title {
      color: #1f2329;
      font-size: 34rpx;
      font-weight: 500;
      margin: 48rpx 0;
    }
    .pwd {
      padding: 0 46rpx 48rpx 46rpx;
    }
    .btn {
      display: flex;
      align-items: center;
      height: 98rpx;
      border-top: #f5f5f5 2rpx solid;
      width: 100%;
      &-item {
        flex: 1;
        text-align: center;
        height: 98rpx;
        line-height: 98rpx;
        color: #1f2329;
        font-size: 34rpx;
        &-s {
          color: #3f60e7;
          border-left: #f5f5f5 2rpx solid;
        }
      }
    }
  }
</style>
